import React, { Component } from 'react'
import BaseForm from '../../components/BaseForm'
import Axios from '../../axios'
import { Card } from 'antd'

class Map extends Component {
    state = {
        total_count: ''
    }
    filterSubmit = (params) => {
        this.params = params
        this.requestList()
    }
    requestList = () => {
        Axios.ajax({
            url: '/map/bike_list',
            data: {
                params: this.params
            }
        }).then((res) => {
            if (res.code == '0') {
                this.setState({
                    total_count: res.result.total_count
                })
                this.renderMap(res.result)
            }
        })
    }
    componentDidMount() {
        this.requestList()
    }
    renderMap = (res) => {
        let list = res.route_list
        this.map = new window.BMap.Map("orderDetailMap");          // 创建地图实例
        let gps_1 = list[0].split(',')
        let startPoint = new window.BMap.Point(gps_1[0], gps_1[1])
        let gps_2 = list[list.length - 1].split(',')
        let endPoint = new window.BMap.Point(gps_2[0], gps_2[1])
        this.map.centerAndZoom(endPoint, 11);
        this.map.enableScrollWheelZoom(true);        //开启鼠标滚轮缩放
        //起点标注
        let startPonintIcon = new window.BMap.Icon('/assets/start_point.png', new window.BMap.Size(36, 42), {
            imageSize: new window.BMap.Size(36, 42),
            anchor: new window.BMap.Size(18, 42)
        })
        let bikeMarkerStart = new window.BMap.Marker(startPoint, { icon: startPonintIcon })
        this.map.addOverlay(bikeMarkerStart)
        //终点标注
        let endPonintIcon = new window.BMap.Icon('/assets/end_point.png', new window.BMap.Size(36, 42), {
            imageSize: new window.BMap.Size(36, 42),
            anchor: new window.BMap.Size(18, 42)
        })
        let bikeMarkerEnd = new window.BMap.Marker(endPoint, { icon: endPonintIcon })
        this.map.addOverlay(bikeMarkerEnd)

        //绘制车辆行驶路线图
        let routeList = []
        list.map((item, index) => {
            let p = item.split(',')
            routeList.push(new window.BMap.Point(p[0], p[1]))
        })
        let polyline = new window.BMap.Polyline(routeList,
            { 
                strokeColor: "blue", 
                strokeWeight: 3, 
                strokeOpacity: 0.8
            }
        );
        this.map.addOverlay(polyline);

        //绘制服务区
        let serviceList = res.service_list;
        let servicePointList = []
        serviceList.map((item, index)=>{
            let servicePoint = new window.BMap.Point(item.lon, item.lat)
            servicePointList.push(servicePoint)
        })
        let servicePolyline = new window.BMap.Polyline(servicePointList,
            { 
                strokeColor: "red", 
                strokeWeight: 3, 
                strokeOpacity: 0.8
            }
        );
        this.map.addOverlay(servicePolyline);

        //绘制自行车图标
        let bikeList = res.bike_list;
        let bikePonintIcon = new window.BMap.Icon('/assets/bike.jpg', new window.BMap.Size(36, 42), {
            imageSize: new window.BMap.Size(36, 42),
            anchor: new window.BMap.Size(18, 42)
        })
        bikeList.map((item, index)=>{
            let p = item.split(',');
            let bikePoint =   new window.BMap.Point(p[0], p[1])
            let bikeMarker = new window.BMap.Marker(bikePoint, { icon: bikePonintIcon })
            this.map.addOverlay(bikeMarker);
        })
    }
    render() {
        const formList = [
            {
                type: 'SELECT',
                label: '城市',
                field: 'city',
                placeholder: '全部',
                initialValue: '0',
                width: 100,
                list: [
                    {
                        id: '0',
                        name: '全部'
                    },
                    {
                        id: '1',
                        name: '南京'
                    },
                    {
                        id: '2',
                        name: '天界'
                    },
                    {
                        id: '3',
                        name: '上海'
                    },
                    {
                        id: '4',
                        name: '杭州'
                    }
                ]
            },
            {
                type: '时间查询',
            },
            {
                type: 'SELECT',
                label: '订单状态',
                field: 'oder_mode',
                placeholder: '全部',
                initialValue: '0',
                width: 120,
                list: [
                    {
                        id: '0',
                        name: '全部'
                    },
                    {
                        id: '1',
                        name: '进行中'
                    },
                    {
                        id: '2',
                        name: '行程结束'
                    }
                ]
            },
        ]
        return (
            <div>
                <Card title="车辆地图">
                    <BaseForm formList={formList} filterSubmit={this.filterSubmit} />
                </Card>
                <Card>
                    <div>共{this.state.total_count}辆车</div>
                    <div id="orderDetailMap" className="order-map"></div>
                </Card>
            </div>
        )
    }
}

export default Map